<template>
  <div id="NewsDetails">
    <div class="newsInfo">
      <ul class="title">
        <li>
          {{news.title}}
        </li>
      </ul>
      <news-info :news="news"/>
      <ul class="img">
        <li>
          <img :src="news.img_src" :width="screenWidth-20">
        </li>
      </ul>
      <ul class="content">
        <li ref="newsContent"></li>
      </ul>
      <div id="NewsNavBar">
        <van-nav-bar :left-text="showLeft?$t('theNews.prevPage'):''"
                     :left-arrow="showLeft"
                     @click-left="onClickLeft(comp_prevId)"
                     @click-right="onClickRight(comp_nextId)"
                      style="color:#999999">
          <span v-show="showRight" slot="right" >{{$t('theNews.nextPage')}}<van-icon class="myIcon" name="arrow" /></span>
        </van-nav-bar>
      </div>
      <ul class="fill"><li></li></ul>
    </div>
    <hot-recommendation :hotList="hotList"/>
    <div class="fillLine"></div>
  </div>
</template>

<script>
  import HotRecommendation from '@/components/news/HotRecommendation'
  import newsInfo from '@/components/news/newsInfo'
  import NewsNavBar from '@/components/news/NewsNavBar'
  import { Toast } from 'vant';
  export default {
    name: "NewsDetails",
    data() {
      return {
        screenWidth: 0,
        wordNum: 0,
        hotList: {},
        showLeft: true,
        showRight: true,
        news: {},
        prevId: -1,
        nextId: -1
      }
    },
    computed: {
      comp_prevId: {
        get() {
          if (this.prevId === null) {
            return -1;
          }
          return this.prevId;
        },
      set() {
      }
      },
      lang: {
        get() {
          let storageData = window.sessionStorage.getItem('lang');
          if (this.$store.state.lang !== storageData && storageData !== 'null') {
            this.$store.dispatch('toChangeLang', storageData);    //同步操作
          }
          return this.$store.getters.getLang;
        },
        set() {
        }
        },
    comp_nextId: {
      get() {
        if (this.nextId === null) {
          return -1;
        } else {
          return this.nextId;
        }
      },
      set() {
      }
    },
    newsID: {
      get() {
        let storageData = window.sessionStorage.getItem('newsId');
        if (this.$store.state.newsId != storageData && storageData !== 'null') {
          this.$store.dispatch('toChangeNewsId', storageData);    //同步操作
        }
        return this.$store.getters.getNewsId;
      },
      set() {
      }
    },
    },
    components: {
        HotRecommendation:HotRecommendation,
        newsInfo:newsInfo,
        NewsNavBar:NewsNavBar
      },
      methods:{
        onClickLeft(id) {
          if(id!==-1){
            this.getNewsDetails(id);
            this.$emit('changeScroll');
          }
        },
        onClickRight(id) {
          if(id!==-1){
            this.getNewsDetails(id);
            this.$emit('changeScroll');
          }
        },
        getScreenWidth() {
          this.screenWidth = document.body.clientWidth;
        },
        getWordNum() {
          this.wordNum = this.screenWidth / 12;
        },
        //判断如果没有下一页或者上一页则隐藏掉上、下一页的按钮
        checkButton(prevId,nextId){
          if(nextId===null){
            this.showRight=false;
          }else{
            this.showRight=true;
          }
          if(prevId===null){
            this.showLeft=false;
          }else{
            this.showLeft=true;
          }
        },
        //获取新闻详情
        getNewsDetails(id) {
          this.$store.dispatch('toChangeLoadIngVisible',true);
          if(id===-1){
            id=this.newsID;         //如果当前没有newsId，则从缓存中获取出新闻的Id
          }
          let _this = this;
          this.axios.get(domain.url+'news/api/get_news_detail', {
            params: {
              id:id,
            }
          })
            .then(function (response) {
              let data = response.data;
              _this.$store.dispatch('toChangeNewsDetails',data.list);
              _this.$store.dispatch('toChangeNewsId',data.list.id);
              _this.news=data.list;
              _this.$refs.newsContent.innerHTML=data.list.content;
              _this.prevId=data.list.prev_id;
              _this.nextId=data.list.next_id;
              _this.checkButton(data.list.prev_id,data.list.next_id);
              _this.changeCurrentPageText('/NewsDetails');
              _this.$store.dispatch('toChangeLoadIngVisible',false);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        changeCurrentPageText(route){
          //显示当前页
          let lang=this.lang;
          if(route==='/MallIndex'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','mall');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','商城');
            }
          }
          if(route==='/brandIndex'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','brand');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','品牌');
            }
          }
          if(route==='/CompanyProfileIndex'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','company profileIndex');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','公司介绍');
            }
          }
          if(route==='/theNewsList'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','news list');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','新闻');
            }
          }
          if(route==='/NewsDetails'){
            if(lang==='en'){
              this.$store.dispatch('toChangeCurrentPageText','news details');
            }else{
              this.$store.dispatch('toChangeCurrentPageText','新闻详情');
            }
          }
        },
        //获取热点新闻
        getHotRecommendation(){
          let _this = this;
          this.axios.get(domain.url+'news/api/get_hot_news',{
            params:{
              language:_this.lang,
              limit:3,
            }
          })
            .then(function (response) {
              let data=response.data;
              _this.hotList=data.list;
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
    created() {
      this.getScreenWidth();
      this.getWordNum();
      this.getNewsDetails(-1);
      this.getHotRecommendation();
    }
    }
</script>

<style scoped>
#NewsDetails{
  color:#000;
  background: #f5f5f5;
}
.newsInfo{
  background: #FFF;
}
  #NewsDetails .title{
    font-size:15px;
    padding:10px;
  }
  #NewsDetails .img{
    padding:20px 10px 5px 10px;
  }
  #NewsDetails .content{
    white-space: pre-line;
    text-align: left;
    padding:0px 10px 10px 10px;
    font-size:14px;
  }
#NewsDetails .content li{
  line-height: 22px;
}
  .fill{
    height:10px;
    background: #f5f5f5;
  }
#NewsNavBar{
  padding:10px 0 0 10px;
  font-size:12px;
}
.van-nav-bar__arrow+.van-nav-bar__text{
  padding-left: 20px;
  color:#999999;
}
.van-icon{
  font-size:25px;
}
#NewsNavBar .van-icon{
  color:#999999;

}
.myIcon{
  margin-top: -2px;
}
.van-nav-bar__left{
  left:0;
}
.van-hairline--bottom::after{
  border-bottom: 0;
}
.van-nav-bar__text{
  color:#999999 !important;
}
.van-nav-bar{
  color:#999999 !important;
}
.fillLine{
  width:100%;
  height:10px;
  background: #f5f5f5;
}
</style>
